<script setup lang="ts">
import headerComponent from './modules/header.vue'
import advComponent from './modules/adv.vue'
import postCopmponet from './modules/post.vue'
import { useScript } from './hook'

const {
  posts,
  isloding,
  loadEnd,
  config,
  userInfo,
  handleScroll,
  handlePost
} = useScript()

</script>

<template>
  <div class="container" @scroll.passive="handleScroll">
    <headerComponent v-if="config" :config="config" />
    <advComponent  v-if="config && userInfo" :config="config" :userInfo="userInfo" class="adv" />
    <div class="postList" >
      <postCopmponet class="post" v-for="post in posts" :key="post.id" :post="post" @vote="handlePost" />
    </div>
    <div class="desc" v-if="isloding && !loadEnd">正在加载中...</div>
    <div class="desc" v-if="loadEnd">没有更多了</div>
  </div>
</template>
<style lang="scss" scoped>
  .container {
    background-color: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
    .adv {
      margin-top: 52px;
      border-bottom: 1px solid #E5E5E5 ;
    }
    // 滑动条不显示
    &::-webkit-scrollbar {
      display: none;
    }
    .post{
      border-bottom: 1px solid #E5E5E5 ;
    }
    .post:last-of-type{
      border-bottom: none !important;
    }

    .desc{
      text-align: center;
      margin: 10px auto;
      font-size: 0.8rem;
      color: #b7b7b7;
    }
  }
</style>